import React, { useState } from 'react';

interface UploadAreaProps {
  onDrop: (files: File[]) => void;
  disabled?: boolean;
}

const UploadArea: React.FC<UploadAreaProps> = ({ onDrop, disabled = false }) => {
  const [dragOver, setDragOver] = useState(false);

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    if (disabled) return;
    setDragOver(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    if (disabled) return;
    setDragOver(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    if (disabled) return;
    setDragOver(false);
    
    const files = Array.from(e.dataTransfer.files);
    if (files.length > 0) {
      onDrop(files);
    }
  };

  return (
    <div
      className={`border-2 border-dashed rounded-lg p-6 text-center mb-5 transition-all ${
        disabled 
          ? 'border-gray-200 bg-gray-100 opacity-50 cursor-not-allowed'
          : dragOver 
            ? 'border-blue-500 bg-blue-50' 
            : 'border-gray-300 bg-gray-50'
      }`}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <div className="text-lg">
        {disabled ? '🚫 上传功能暂时禁用' : '📁 拖拽文件到这里快速上传'}
      </div>
      <div className="mt-2 text-sm text-gray-600">
        {disabled 
          ? '请等待当前操作完成'
          : '支持: 图片、视频、音频、文档、压缩文件等 (最大500MB)'
        }
      </div>
    </div>
  );
};

export default UploadArea; 